<template>
    <div class="cd-wrapper" >
        <div class="table">
        	
            <el-row class="header_row">
                <el-col :span="24">帮助咨询</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">标题：</el-col>
                <el-col :span="8" class="col_2">{{ customerDetail.title }}</el-col>
                <el-col :span="12" class="col_4">
                    <el-button  type="primary" size="small" @click="editCustomer" style="margin-left:24px">修改信息</el-button>
                </el-col>
            </el-row>
           
            <el-row>
            	<el-col :span="4" class="col_1 " style="min-height: 601px;">内容描述：</el-col>
                <el-col :span="20" class="col_2 " v-html="customerDetail.content" style="min-height: 600px;overflow:auto!important;">{{customerDetail.content}}</el-col>
            	
            </el-row>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker,Tabs,TabPane,Tree,Pagination,
        Cascader, ButtonGroup, Button, Table, TableColumn, Checkbox, Message, MessageBox, Dialog
    } from 'element-ui'
    import Cookie from 'js-cookie';
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    
    import axios from '~plugins/axios';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Cascader);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(Tree);
    Vue.use(Pagination);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(Dialog);

    Vue.prototype.$message = Message;

    export default {
        props: {
        },
        head() {
			return { 
				title: "资讯详情",
			}
		},
        data () {
            return {
                detail: 'detail',
                customerDetail: [],
                id:""
            }
        },
        filters: {
            formType(type) {
            	if(type = "SELECTION"){
            		return "精选好课"
            	}else{
            		return ""
            	}
            },
            formProType(protype) {
            	if(protype = "OFFICIAL"){
            		return "仅限正式会员"
            	}else if (protype = 'PROBATION'){
            		return "所有可看"
            	}else{
            		return ""
            	}
            }
        },
        methods: {
            editCustomer() {
                //this.$router.push({path: '/b2cAdmin/edit?id=' + this.data.id + '&customerContactId='+ this.data.customerContactId});
                  this.$router.push({path: '/b2cAdmin/modifyhelp?id='+this.id}); 
            },
            getCustomerDetail() {     
                  this.$store.dispatch('formmanDetail', {id: this.id})
                    .then((response) => {
                        if(!response){
                            return;
                        }
                        let result = response.data;

                        if (result.code === 0) {
                            //pageTab
                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                                let arr = this.pageTabsList;
                                arr[arr.length-1].name = result.data.title;
                                this.$store.commit('PAGETABSLIST',{data:arr})
                            }
                            this.customerDetail = result.data;
                           if( this.customerDetail.contractProperty == "PROBATION"){
                        		this.customerDetail.contractProperty = "所有可看";
                        	}else if(this.customerDetail.contractProperty == "OFFICIAL"){
                        		this.customerDetail.contractProperty = "仅限正式会员";
                        	}
                        }
                    })
            },
            openWeb (url) {
                window.open(url);
            },
           geturl() {
				let url = location.search;
				if(url.indexOf("?") != -1) {
					let str = url.substr(4);
					this.id = str;
				}
			},
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
            
        },
        created () {

        },
        mounted() {
           this.geturl();
           this.getCustomerDetail();
        }
    }
</script>

<style lang="scss">
    .action_row {
    .el-button {
        float: right;
    .el-button--danger {
        margin-left: 10px;
    }
    }
    }

    .table {
        margin-top: 10px;
        border: 1px solid #ccc;
        font-size: 14px;

    .header_row {
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        font-weight: bold;
        color: #008dd8;
        text-indent: 10px;
        background: #f1f2f2;
    }

    .col_2, .col_4 {
        text-align: left;
        text-indent: 3px;
    }

    .col_1, .col_3 {
        text-align: right;
        background: #f1f2f2;
    }

    .col_1, .col_2, .col_3 {
        border-right: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
    &:last-child {
         border-bottom: none
     }
    }
    .col_4 {
        border-bottom: 1px dotted #ccc;
    }

    .col_bottom {
        border-bottom: none
    }

    .el-col {
        height: 40px;
        line-height: 40px;
    .el-button-group {
        margin-left: 10px;
    }
    }
    .webs{
    	color:#20a0ff 
    }
    .customer_web {
    	color:#20a0ff 
    &:hover {
         cursor: pointer;
         text-decoration: underline;
     }
    }
    .content_title, .content_text {
        height: 300px;
    }
    textarea {
        resize: none;
        height: 300px;
    }
    .table_action_row {
        text-align: center;
        background: #f1f2f2;
    }
    }
    .signRow {
        background-color: #00ee00;
    }
    .follow_list {
        margin-top: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        min-width: 1040px;
        .el-col {
            height: 40px;
            line-height: 40px;
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            text-indent: 12px;
        &:last-child {
             border-right: none;
         }
        }
        .follow_content {
            height:auto;
            min-height: 40px;
            padding: 5px 10px;
            border-bottom: none;
            word-spacing:0px;
            div{
                line-height: 24px;
            }
        }
        .audio-pause,
        .audio-play{
            width: 25px;
            height: 25px;
            vertical-align: middle;
            cursor: pointer;
        }
        .time_sty{
            line-height: 16px;
            vertical-align: middle;
            width: 100px;
            text-indent: 0;
            display: inline-block;
            word-wrap:break-word
        }
    }
    .cd-get-allot{
        padding: 20px 0 0;
        text-align: center;
    }
</style>